<template>
    <view class="form-item_select" :class="detail ? 'is-disabled' : ''">
        <view class="form-item_input-wrap form-item_select-wrap" @click="showPicker">
            <view class="form-item_value">
                <view class="form-item_select-input">
                    <view>{{ provideSelectData || '请选择' }}</view>
                </view>
            </view>
            <text class="iconfont form-item_icon form-item_icon-arrow-down" :class="reverseArrowClasses">&#xe635;</text>
        </view>
        <!-- 弹窗 -->
        <u-select v-model="selectShow" :list="list" :label-name="labelText" :value-name="valueText"
            @confirm="confirm"></u-select>
    </view>
</template>

<script>
export default {
    name: 'FormItemSelect',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        list: {
            type: Array,
            default: () => ([])
        },
        labelText: {
            type: String,
            default: 'label'
        },
        valueText: {
            type: String,
            default: 'value'
        },
        detail: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        selectValue: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit('change', value);
            }
        },
        // 用于渲染 数据
        provideSelectData() {
            const value = this.selectValue.toString()
            if (!value) return null
            let selectValue;
            if (this.list.length) {
                selectValue = this.list.find(item => value == item[this.valueText])
                return selectValue[this.labelText]
            }
            return null
        },
        reverseArrowClasses() {
            return this.selectShow ? 'form-item_icon-reverse' : ''
        },
    },
    data() {
        return {
            selectShow: false
        }
    },
    methods: {
        showPicker() {
            if (this.detail) return
            this.selectShow = true
        },
        removeSelectData(item) {
            const value = item[this.valueText]
            const selectVals = this.selectValue.split(',')
            let index = selectVals.findIndex(id => id == value);
            if (index !== -1) {
                selectVals.splice(index, 1)
                this.selectValue = selectVals.join(',')
            }
        },
        confirm(e) {
            this.selectValue = e[0].value
        }
    }
}
</script>
<style scoped lang="scss">
.form-item_select {
    width: 100%;
    height: 100%;
    cursor: pointer;

    &.is-disabled {
        .wrap {
            .form-item_input-wrap {
                .form-item_input {
                    border: none;
                    color: #606266;
                    background-color: #fff;
                }
            }
        }
    }

    &-wrap {
        width: 100%;
        min-height: 100%;
        height: auto;
        display: flex;
        align-items: center;
        border: 2rpx solid #dcdfe6;
        color: #606266;
        background: #fff;
        border-radius: 8rpx;
        font-size: 26rpx;

        .form-item_icon-arrow-down {
            transition: 0.3s;
        }

        .form-item_icon-reverse {
            transform: rotate(180deg);
        }

        .form-item_select-list {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6rpx;
            padding: 8rpx 0;

            .form-item_select-item {
                height: 40rpx;
                line-height: 1;
                border-radius: 8rpx;
                background-color: #f0f2f5;
                padding: 0 10rpx;
                font-size: 12px;
                color: #909399;
                display: flex;
                align-items: center;

                .tag-text {
                    margin-right: 10rpx;
                }

                .form-item_icon-close {
                    font-size: 12px;
                    cursor: pointer;
                }
            }
        }

        .form-item_select-input {
            padding: 0 30rpx;
        }
    }
}
</style>